
// 归档
import { RecommendModelState } from "@/models/recommend";
import { formatDate } from "@/utils";
import { useEffect } from "react";
import { ArchivesModelState, CategoryModelState, Link, useDispatch, useSelector } from "umi";
import styles from './index.less'
const Archives = () => {

  const dispatch = useDispatch()
  //归档列表渲染
  const archivesList = useSelector((state: { archives: ArchivesModelState }) => state.archives)

  //归档文章分类
  const { archivesPage } = useSelector((state: { category: CategoryModelState }) => state.category)

  //归档推荐阅读
  const { RecommendList } = useSelector((state: { recommend: RecommendModelState }) => state.recommend)

  useEffect(() => {
    dispatch({
      type: "archives/ArchivesList",
    })
    dispatch({
      type: "category/getCategory",
    })
    dispatch({
      type: "recommend/getRecommend",
    })
  }, [])

  return <div className="container">
    <div className="_3tC3y9W6nEYVdAwGypNta9">

      <div className={styles.on}>

      </div>
      {/* //左侧 */}
      <section className="_1r_Dp71aY9wU_PZOrRyGzl">
        <div className="_31uY1VinxiwKyG_XZXFpv">
          <div className="_1tJ6zWK6o_q8KafBWysrmZ">
            <p><span>归档</span></p>
            <p>共计 <span>{archivesList.archivesLength}</span>篇</p>
          </div>
          <div className="GIf9xHwpzxlxHcDyE8sCn">
            <h2>2022</h2>
            <div className="_172XrbegThYDU7WfEHTUpM">
              <h3>March</h3>
              <ul>{
                archivesList.archivesList.map(item => {
                  return <li className="_172XrbegThYDU7WfEHTUpMLi" key={item.id}> <Link to={`/article/${item.id}`}>
                    <span className="OTAyqb_MWljCg91UnBG5u">{formatDate(item.publishAt)}</span>
                    <span className="JxUmPoeJKqnfS58GvD3vz">{item.title}</span ><br />
                  </Link>



                  </li>
                })
              }</ul>
            </div>
          </div>
        </div>
      </section>
      {/* //右侧 */}
      <aside className="_3yp3HpYTQik_UvNquTL2uQ _2dyoSl4ynuBmhwRO6bebOZ">
        <div className="sticky">
          {/* // 推荐阅读 */}
          <div className="ammbB8tpRTlzwGu9Q8GNE _3PpmFreY8xlC6Z2Y0lcyk-">
            <div className="_1hh60i8CByuosza1JbgE0Q">
              <span>推荐阅读</span>
            </div>
            <div className="ant-spin-nested-loading">
              <div className="ant-spin-container">
                <ul className="_1PytTgSelvgOTMZR4ckInB">{
                  RecommendList.map(item => {
                    return <li className="_1PytTgSelvgOTMZR4ckInBLi" key={item.id} ><Link to={`/article/${item.id}`}><span>{item.title}</span>&nbsp;·&nbsp;<span> <time key={item.publishAt}>{formatDate(item.publishAt)}前</time></span></Link></li>
                  })
                }</ul>
              </div>
            </div>
          </div>
          {/* // 文章分类 */}
          <div className="_3KFGvyCY0omWyEQOzioDDk">
            <div className="_2b0LQ_j7dN-JQtnGkqmrDz">
              <span>文章分类</span>
            </div>
            <ul>{
              archivesPage.map(item => {
                return <li className="_3KFGvyCY0omWyEQOzioDDkLi" key={item.id}><Link to={undefined}><span>{item.label}</span>共计&nbsp;{item.articleCount}&nbsp;篇文章</Link></li>
              })
            }
            </ul>
          </div>
        </div>
      </aside>
    </div >

  </div>
}

export default Archives;

